<template>
  <view class="bg">
    <view class="container">

      <!-- 用户信息 -->
      <view
        class="user-info" 
        :style="{
          background: `rgba(0, 175, 203, ${pageOffsetTop > 90 ? 1 : pageOffsetTop / 90})`,
        }">
        <image v-if="isLogin" class="avatar" :src="userInfo.profile || 'https://www.thuguardian.com/files/small_program/avatat-default.png'"></image>
        <image v-else class="avatar" src="https://www.thuguardian.com/files/small_program/avatat-default.png"></image>
        <text class="username" @click="handleClickLogin">{{isLogin ? userInfo.name : 'Hello! 请登录/注册'}}</text>
        <div @click="handleClickMsg" class="message-box">
          <image class="message"  src="https://www.thuguardian.com/files/small_program/message.png"></image>
          <div v-if="readNum > 0" class="message-dot"></div>
        </div>
      </view>

      <!-- 推广板块 -->
      <view class="promotion-section">
        <view class="promotion-content">
          <view class="elderly-images">
            <image class="elderly-female" src="https://www.thuguardian.com/files/small_program/banner.png"></image>
            <view class="elderly-male"></view>
          </view>
          <text class="promotion-title">健康追踪自评问卷</text>
          <view class="promotion-period">
            <img class="calendar" src="https://www.thuguardian.com/files/small_program/calendar.png" alt="">
            <text>周期：7天</text>
          </view>
        </view>
        <div class="promotion-text">
          <text class="promotion-description">通过睡眠、情绪等日常问题快速测评</text>
          <button class="start-button" @click="handleAppraisal">开始测评</button>
        </div>
      </view>

      <!-- 健康文章区域 -->
      <view class="health-articles">
        <view class="articles-header">
          <text class="articles-title">健康文章</text>
          <text class="view-all" @click="handleClickAll">查看全部</text>
          <van-icon size="16px" name="arrow" color="rgba(0,0,0,.65)" />
        </view>
        <view class="article-item">
          <div class="list-item" v-for="item in dataList" :key="item.article_id">
            <Card
              :articleId="item.article_id"
              :title="item.content.news_item[0].title"
              :content="item.content.news_item[0].content"
              :image="item.content.news_item[0].thumb_url"
              :time="fmtTimeStamp(item.update_time)"
              :token="isLogin"
            ></Card>
          </div>
        </view>
      </view>

      <CpDialog ref="CpDialogRef" @ok="handleOk"></CpDialog>
    </view>
  </view>
</template>

<script>
import Card from '@/components/card/index.vue'
import CpDialog from './components/cp-dialog.vue'
import { articleList } from '@/api/article-list'
import { fmtTimeStamp } from '@/utils/index'
import { getInfo } from '@/api/common/index.js'
import { unreadNumbers } from '@/api/message/index.js'

export default {
  components: {
    Card,
    CpDialog
  },
  data() {
    return {
      pageOffsetTop: 0,
      isLogin: false,
      userInfo: {},
      dataList: [],
      fmtTimeStamp,
      readNum: 0
    }
  },
  onShow() {
    this.isLogin = wx.getStorageSync('token')
    this.userInfo = wx.getStorageSync('userInfo')
    console.log(this.isLogin, 'isLoginisLoginisLogin')
    if (this.isLogin) {
      this.handleNum()
    }
  },
  mounted() {
    this.getDataList()
    wx.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    })
  },
  methods: {
    async getUserInfo() {
      const res = await getInfo()

      if (res.code === 200) {
        wx.setStorageSync('userInfo', res.data);
      }
    },
    // 未读消息数量
    async handleNum () {
      const res = await unreadNumbers()
      if (res.code == 200) {
        this.readNum = res.data
      }
    },
    async getDataList() {
      const res = await articleList({
        page: 1,
        page_size: 5
      })

      if (res.code === 200) {
        this.dataList = res.data.item
      }
    },
    handleClickLogin() {
      if (!this.isLogin) {
        wx.navigateTo({
          url: '/pages/login/main'
        })
      }
    },
    handleAppraisal() {
      if (this.isLogin) {
        this.$refs.CpDialogRef.show = true
      } else {
        this.handleClickLogin()
      }
    },
    handleOk() {
      this.$refs.CpDialogRef.show = false
      wx.navigateTo({
        url: '/pages/test-base-info/main'
      })
    },
    handleClickAll() {
      if (this.isLogin) {
        wx.navigateTo({
          url: '/pages/article-list/main'
        })
      } else {
        this.handleClickLogin()
      }
    },
    handleClickMsg() {
      if (this.isLogin) {
        wx.navigateTo({
          url: '/pages/message/main'
        })
      } else {
        this.handleClickLogin()
      }
    }
  },
  // onShareAppMessage: function (res) {
  //   return {
  //     title: '清心守护',
  //     path: '/pages/index/main',
  //     success: function (res) {
  //       // 分享成功
  //       console.log("分享成功:", res);
  //     },
  //     fail: function (res) {
  //       // 分享失败
  //       console.log("分享失败:", res);
  //     }
  //   }
  // },
  onPageScroll ({scrollTop}) {
    this.pageOffsetTop = scrollTop
  },
  onPullDownRefresh() {
    this.getDataList()
    if (!this.isLogin) {
      return
    }
    this.getUserInfo()
    this.handleNum()
  }
}
</script>

<style>
.bg {
  background: #f4f4f4;
}
.container {
  padding: 0;
  width: 100%;
  min-height: 100vh;
  padding-top: 140px;
  padding-bottom: 70px;
  background: url('https://www.thuguardian.com/files/small_program/bg01.png') no-repeat;
  background-size: 100% auto;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.time {
  font-size: 14px;
  color: #333;
}

.battery-icons {
  display: flex;
  align-items: center;
}

.wifi-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.battery {
  font-size: 14px;
  color: #333;
}

.user-info {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  padding: 15px;
  padding-top: 80px;
  width: 100%;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin-right: 10px;
}

.username {
  font-size: 16px;
  color: #fff;
}

.message-box {
  margin-left: auto;
  width: 28px;
  height: 28px;
  position: relative;
}
.message {
  display: block;
  margin: 2 auto;
  width: 24px;
  height: 24px;
}
.message-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FFAB2E;
}

.promotion-section {
  width: 345px;
  height: 314px;
  background-color: #fff;
  border-radius: 12px;
  margin: 0 auto;
  margin-top: 16px;
  overflow: hidden;
}

.promotion-content {
  width: 100%;
  height: 184px;
  position: relative;
  /* background: #2196f3; */
}

.elderly-images {
  width: 100%;
  height: 100%;
  position: relative;
}

.elderly-female {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.elderly-male {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  opacity: .5;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 97.37%);
}

.promotion-title {
  font-size: 18px;
  position: absolute;
  left: 25px;
  font-weight: bold;
  top: 113px;
  color: #FFF;
}

.promotion-period {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #FFF;
  position: absolute;
  left: 25px;
  top: 152px;
}
.promotion-period .calendar {
  display: block;
  margin-right: 5px;
  width: 17px;
  height: 17px;
}

.promotion-text {
  padding: 20px 25px;
}

.promotion-description {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
}

.start-button {
  width: 100%;
  height: 48px;
  background-color: #01AFCB;
  color: #fff;
  font-size: 20px;
  margin-top: 18px;
  border-radius: 48px;
}

.health-articles {
  border-radius: 10px;
  padding: 20px;
}

.articles-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.articles-title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 22px;
  font-weight: bold;
}

.view-all {
  margin-left: auto;
  margin-right: 8px;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.65);
}

.article-item {
}

.article-image {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  margin-right: 15px;
}

.article-info {
  flex: 1;
}

.article-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.article-summary {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.article-time {
  font-size: 12px;
  color: #999;
}
</style>